<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head lang="en">
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="js/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="js/bootstrap.min.js"></script>
    <!-- 日期控件 -->
    <link href="//cdn.bootcss.com/font-awesome/4.4.0/css/font-awesome.min.css"rel="stylesheet">
    <link rel="stylesheet" type="text/css" media="all" href="css/daterangepicker-bs3.css"/>
    <script type="text/javascript" src="js/moment.js"></script>
    <script type="text/javascript" src="js/daterangepicker.js"></script>
    <script type="text/javascript" src="js/date.js"></script>
    <title>外賣訂單記錄</title>
</head>
<body>
<div class="record-main">
    <div class="main-title">
        外賣訂單記錄
    </div>
    <div class="record-content">
       <form action="" class="form-horizontal" id="searchFrm">
       <div class="record-box">
             <div class="search">
                 <div class="row">
                     <div class="col-md-3 record-btn">
                         <span>門店</span>
                         <select name="" id="" class="form-control" style="width: 190px;">
                             <option value="">11</option>
                             <option value="">22</option>
                             <option value="">33</option>
                             <option value="">44</option>
                         </select>
                     </div>
                 </div>
                 <div class="row" style="margin-top: 20px;">
                   <div class="col-md-3">
                       <fieldset>
                           <div class="control-group">
                               <div class="controls">
                                   <div class="input-prepend input-group" style="width: 180px;margin-top: -1px;">
                                       <span class="add-on input-group-addon"><i class="glyphicon glyphicon-calendar fa fa-calendar"></i></span>
                                       <input type="text" readonly="readonly" style="width: 190px;background: #ffffff;" name="useDate" id="useDate" class="form-control"
                                              value=" " />
                                   </div>
                               </div>
                           </div>
                       </fieldset>
                   </div>
                   <div class="col-md-9 take-order">
                       <a href="javascript:setDate(1);" class="btn btn-default quickSelDate">今天</a>
                       <a href="javascript:setDate(2);" class="btn btn-default quickSelDate">昨天</a>
                       <a href="javascript:setDate(3);" class="btn btn-default quickSelDate">本週</a>
                       <a href="javascript:setDate(4);" class="btn btn-default quickSelDate">本月</a>
                       <a href="javascript:setDate(5);" class="btn btn-default quickSelDate">上個月</a>
                   </div>
                 </div>
             </div>
             <div class="search-btn">
                 <div class="btn-submit">
                     <button class="btn btn-default record-search" style="background:#00a189;border: 1px solid #00a189;color: white;height: 30px;line-height: 16px;margin-left: 0px;">查詢</button>
                 </div>
                 <div class="btn-export">
                    <button class="btn btn-default record-dc"style="color: #6c6666;height: 30px;line-height: 16px;" >導出</button>
                 </div>
             </div>
           <div class="record-list" style="height:auto;overflow: hidden">
              <table class="order-content">
                  <tr>
                      <th style="text-align: left;padding-left: 20px;">訂單日期</th>
                      <th>訂單編號</th>
                      <th>下單時間</th>
                      <th style="width: 200px;">用戶支付金額</th>
                      <th>配送費</th>
                      <th style="margin-top: 10px;padding-top: 20px;">對賬金額<small style="display: block;color: darkgray;margin-bottom: 5px;">（總金額-配送費）</small></th>
                  </tr>
                  <tr>
                      <td>2016-09-22</td>
                      <td>2016091123056213</td>
                      <td>2016-09-22 12:30</td>
                      <td style="text-align: center">73</td>
                      <td style="text-align: center">5</td>
                      <td style="text-align: center">71</td>
                  </tr>
                  <tr>
                      <td>2016-09-22</td>
                      <td >2016091123056213</td>
                      <td>2016-09-22 12:30</td>
                      <td style="text-align: center">73</td>
                      <td style="text-align: center">5</td>
                      <td style="text-align: center">71</td>
                  </tr>
                  <tr>
                      <td>2016-09-22</td>
                      <td>2016091123056213</td>
                      <td>2016-09-22 12:30</td>
                      <td style="text-align: center">73</td>
                      <td style="text-align: center">5</td>
                      <td style="text-align: center">71</td>
                  </tr>
                  <tr>
                      <td>2016-09-22</td>
                      <td >2016091123056213</td>
                      <td>2016-09-22 12:30</td>
                      <td style="text-align: center">73</td>
                      <td style="text-align: center">5</td>
                      <td style="text-align: center">71</td>
                  </tr>
                  <tr>
                      <td>2016-09-22</td>
                      <td>2016091123056213</td>
                      <td>2016-09-22 12:30</td>
                      <td style="text-align: center">73</td>
                      <td style="text-align: center">5</td>
                      <td style="text-align: center">71</td>
                  </tr>
                  <tr>
                      <td>2016-09-22</td>
                      <td >2016091123056213</td>
                      <td>2016-09-22 12:30</td>
                      <td style="text-align: center">73</td>
                      <td style="text-align: center">5</td>
                      <td style="text-align: center">71</td>
                  </tr>
                  <tr>
                      <td>2016-09-22</td>
                      <td >2016091123056213</td>
                      <td>2016-09-22 12:30</td>
                      <td style="text-align: center">73</td>
                      <td style="text-align: center">5</td>
                      <td style="text-align: center">71</td>
                  </tr>
                  <tr>
                      <td>2016-09-23</td>
                      <td >2016091123056213</td>
                      <td>2016-09-22 12:30</td>
                      <td style="text-align: center">73</td>
                      <td style="text-align: center">5</td>
                      <td style="text-align: center">71</td>
                  </tr>
              </table>
           </div>
           <div class="page-list">
               <div class="page text-center">
                      <span>
                         21条 2/3頁
                      </span>
                   <button class="btn btn-default" style="margin: 10px 0;">首頁</button>
                   <button class="btn btn-default">上一頁</button>
                   <button class="btn btn-default">下一頁</button>
                   <button class="btn btn-default">末頁</button>
               </div>
           </div>
        </div>
       </form>
</div>
</div>
<script>
    //日期控件
    function setDate(flag){
        switch(flag){
            case 1:
                // 今天
                document.getElementById('searchFrm')['useDate'].value = getTodayStr() + ' - ' + getTodayStr();
                document.getElementById('searchFrm')['tickets.useStartDate'].value = getTodayStr();
                document.getElementById('searchFrm')['tickets.useEndDate'].value = getTodayStr();
                break;
            case 2:
                // 昨天
                document.getElementById('searchFrm')['useDate'].value = getYesterdayStr() + ' - ' + getYesterdayStr();
                document.getElementById('searchFrm')['tickets.useStartDate'].value = getYesterdayStr();
                document.getElementById('searchFrm')['tickets.useEndDate'].value = getYesterdayStr();
                break;
            case 3:
                // 本周一到今天
                document.getElementById('searchFrm')['useDate'].value = getFirstDateOfCurrWeek() + ' - ' + getTodayStr();
                document.getElementById('searchFrm')['tickets.useStartDate'].value = getFirstDateOfCurrWeek();
                document.getElementById('searchFrm')['tickets.useEndDate'].value = getTodayStr();
                break;
            case 4:
                // 本月1号到今天
                document.getElementById('searchFrm')['useDate'].value = getFirstDateOfCurrMonth() + ' - ' + getTodayStr();
                document.getElementById('searchFrm')['tickets.useStartDate'].value = getFirstDateOfCurrMonth();
                document.getElementById('searchFrm')['tickets.useEndDate'].value = getTodayStr();
                break;
            case 5:
                // 上个月1号到上个月最后一天
                document.getElementById('searchFrm')['useDate'].value = getFirstDateOfPrevMonth() + ' - ' + getLastDateOfPrevMonth();
                document.getElementById('searchFrm')['tickets.useStartDate'].value = getFirstDateOfPrevMonth();
                document.getElementById('searchFrm')['tickets.useEndDate'].value = getLastDateOfPrevMonth();
                break;
        }
    }
    $(function() {
        $('#useDate').daterangepicker(null, function(start, end, label) {
            document.getElementById('searchFrm')['tickets.useStartDate'].value = start.format('YYYY-MM-DD') ;
            document.getElementById('searchFrm')['tickets.useEndDate'].value = end.format('YYYY-MM-DD');
        });
    });


</script>
</body>
</html>